<route lang="json5">
{
  style: {
    navigationBarTitleText: '活动评分详情',
  },
}
</route>

<template>
  <view class="common-detail-info-body">
    <view class="detail-info-title">
      <view class="detail-info-title__line"></view>
      <text>{{ detail.name }}</text>
    </view>
    <view
      class="detail-info-desc"
      v-if="detail.note"
    >
      {{ detail.note }}
    </view>
    <view class="detail-info-others">
      <view class="others-line"></view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="home"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">活动礼堂</view>
        </view>
        <view class="others-item__value">{{ detail?.hallId_dictText }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="user"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">申报人</view>
        </view>
        <view class="others-item__value">{{ detail?.userId_dictText }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="time"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">活动日期</view>
        </view>
        <view class="others-item__value">{{ detail?.date }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="note"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">活动类型</view>
        </view>
        <view class="others-item__value">{{ detail?.type_dictText }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="usergroup"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">预计参与人数</view>
        </view>
        <view class="others-item__value">{{ detail?.expectPayerNumber }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="money-circle"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">预计费用</view>
        </view>
        <view class="others-item__value">{{ detail?.expectFee }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="location"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">地址</view>
        </view>
        <view class="others-item__value">{{ detail?.address }}</view>
      </view>
      <view class="others-item block">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="spool"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">安全预案</view>
        </view>
        <view class="others-item__value">{{ detail?.safeNote }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="time"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">实际活动时长(小时)</view>
        </view>
        <view class="others-item__value">{{ detail?.actualDuration }}</view>
      </view>
      <view class="others-item">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="usergroup"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">实际参与人数</view>
        </view>
        <view class="others-item__value">{{ detail?.actualPayerNumber }}</view>
      </view>
      <view class="others-item block">
        <view class="others-item__label">
          <view class="others-item__label-icon">
            <wd-icon
              name="camera"
              size="28rpx"
            ></wd-icon>
          </view>
          <view class="others-item__label-text">现场媒资</view>
        </view>
        <!-- <view class="others-item__value">{{ detail?.actualPayerNumber }}</view> -->
        <view class="media-img-wrapper">
          <wd-img
            custom-class="media-img"
            v-for="item in formattedLiveUrl"
            :key="item"
            :width="100"
            :height="100"
            :src="item"
            mode="aspectFill"
            :enable-preview="true"
          />
        </view>
      </view>
    </view>
  </view>
  <!-- <view class="common-container">
    <wd-form custom-class="common-form" ref="formRef" :model="formModel">
      <wd-cell-group>
        <wd-cell title="活动封面">
          <view class="media-img-wrapper">
            <wd-img
              custom-class="media-img"
              v-for="item in formattedCoverUrl"
              :key="item"
              :width="100"
              :height="100"
              :src="item"
              :enable-preview="true"
            />
          </view>
        </wd-cell>
        <wd-input
          label="活动名称"
          label-width="80px"
          prop="name"
          v-model="formModel.name"
          placeholder=""
          readonly
        />
        <wd-input
          label="所属礼堂"
          label-width="80px"
          prop="name"
          v-model="formModel.hallId_dictText"
          placeholder=""
          readonly
        />
        <wd-input
          label="组织人"
          label-width="80px"
          prop="name"
          v-model="formModel.userId_dictText"
          placeholder=""
          readonly
        />
        <wd-input
          label="活动类型"
          label-width="80px"
          prop="name"
          v-model="formModel.type_dictText"
          placeholder=""
          readonly
        />
        <wd-input
          label="活动日期"
          label-width="80px"
          prop="name"
          v-model="formModel.date"
          placeholder=""
          readonly
        />
        <wd-input
          label="活动地址"
          label-width="80px"
          prop="name"
          v-model="formModel.address"
          placeholder=""
          readonly
        />
        <wd-input
          label="预计参与人数"
          label-width="90px"
          prop="name"
          v-model="formModel.expectPayerNumber"
          placeholder=""
          readonly
        />
        <wd-input
          label="预计费用"
          label-width="80px"
          prop="name"
          v-model="formModel.expectFee"
          placeholder=""
          readonly
        />
        <wd-cell title="活动介绍">
          <wd-textarea v-model="formModel.note" auto-height placeholder="" readonly />
        </wd-cell>
        <wd-cell title="安全预案">
          <wd-textarea v-model="formModel.safeNote" auto-height placeholder="" readonly />
        </wd-cell>
        <wd-cell title="现场媒资">
          <view class="media-img-wrapper">
            <wd-img
              custom-class="media-img"
              v-for="item in formattedLiveUrl"
              :key="item"
              :width="100"
              :height="100"
              :src="item"
              :enable-preview="true"
            />
          </view>
        </wd-cell>
        <wd-input
          label="实际活动时长(小时)"
          label-width="110px"
          prop="expectFee"
          v-model="formModel.actualDuration"
          placeholder=""
          readonly
        />
        <wd-input
          label="实际参与人数"
          label-width="110px"
          prop="expectFee"
          v-model="formModel.actualPayerNumber"
          placeholder=""
          readonly
        />
      </wd-cell-group>
    </wd-form>
  </view> -->
</template>

<script setup>
import ActivityApi from '@/service/activity'
import OrderApi from '@/service/order'
import { useDictStore } from '@/store/dict'
import { prevPageNeedRefresh, formatUrlString } from '@/utils'
import dayjs from 'dayjs'

const formRef = ref()
const formModel = ref({
  name: '',
  hallId: '',
  type: '',
  address: '',
  date: '',
  expectFee: '',
  expectPayerNumber: '',
  note: '',
  safeNote: '',
})

const detail = ref({})

const formattedCoverUrl = computed(() => {
  return formatUrlString(formModel.value.coverUrl, false)
})
// const formattedLiveUrl = computed(() => {
//   return formatUrlString(formModel.value.liveUrl, false)
// })
const formattedLiveUrl = computed(() => {
  return formatUrlString(detail.value.liveUrl, false)
})

const getDetail = async (id) => {
  const params = { id }
  const { code, result } = await ActivityApi.getActivityMarkDetail(params)
  if (code === 200 && result) {
    // formModel.value = { ...result }
    detail.value = { ...result }
  }
}

// const submitForm = () => {
//   let objKey = ''
//   for (const key in formKeyMap) {
//     if (!formModel.value[key]) {
//       objKey = key
//       break
//     }
//   }
//   if (objKey) {
//     uni.showToast({
//       title: `${formKeyMap[objKey]}不能为空`,
//       icon: 'none',
//     })
//     return false
//   }

//   formRef.value
//     .validate()
//     .then(async () => {
//       const date = dayjs(formModel.value.date).format('YYYY-MM-DD')
//       const params = {
//         ...formModel.value,
//         date,
//       }
//       const { code, result, message } = await OrderApi.addActivityApplication(params)
//       if (code === 200 && result) {
//         uni.showToast({
//           icon: 'success',
//           title: '添加成功',
//         })
//         formModel.value = initFormModel
//         setTimeout(() => {
//           isNavigateBack.value = true
//           uni.navigateBack()
//         }, 1000)
//       } else {
//         uni.showToast({
//           icon: 'error',
//           title: message,
//         })
//       }
//     })
//     .catch((error) => {
//       console.error(error)
//     })
// }

const isNavigateBack = ref(false)
onUnload(() => {
  prevPageNeedRefresh(isNavigateBack.value)
})

onLoad((options) => {
  if (options.id) {
    getDetail(options.id)
  }
})
</script>

<script>
export default {
  options: {
    styleIsolation: 'shared',
  },
}
</script>

<style lang="scss">
@import '../../../style/common-form';

.add-activity {
  height: calc(100vh - 46px);
  overflow: scroll;

  .submit-btn {
    margin-bottom: 30px;
  }
}

.media-img-wrapper {
  text-align: left;

  :deep() .media-img {
    margin-right: $uni-spacing-row-sm;
    margin-bottom: $uni-spacing-col-sm;
  }
}
</style>
